<style lang="stylus" scoped>
  .top-li{
    border-top: 1px solid rgba(238,238,238,1);
    text-align: center;
    padding:10px 0;
    /* margin: 0 5px; */
    font-size:14px;
    background: rgba(255,255,255,1);
    color:rgba(102,99,99,1);
    /* border-bottom:3px solid rgba(255,161,176,1); */
  }
  .active-li{
      color:rgba(255,161,176,1);

      .active-li-span{
        padding-bottom: 10px;
        border-bottom: 3px solid rgba(255,161,176,1);
      }
    }

    body,html,.box{
      /* height: 100%; */
      /* position: fixed;left: 0;right: 0;top: 0;bottom: 0; */
    }
    .data-li{
      width: 100%;
      padding:15px;
      /* margin-top: 15px; */
      border-bottom: 10px solid rgba(250,250,250,1);
      background: rgba(255,255,255,1);

    }
    .data-li:nth-last-child(1){
      border-bottom: 0px solid rgba(250,250,250,1);
    }
    .li-time{
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(102,99,99,1);
      margin-bottom: 15px;
    }
    .li-content{
      padding:15px 8px;
      background: rgba(250,250,250,1);
      transform: translate(0,0);

    }
    .li-content-right{
      padding-left:12px;
      div:nth-child(1){
        font-size:14px;
        font-family:SourceHanSansCN-Medium;
        font-weight:600;
        color:rgba(25,25,25,1);
        line-height:18px;
      }
      div:nth-child(2){
        font-size:12px;
        font-family:'SourceHanSansCN-Regular';
        font-weight:400;
        color:rgba(160,154,155,1);
      }
    }
    .add-box{
      padding:20px 0;
      border-bottom:1px solid rgba(238,238,238,1);
      :nth-child(1){
        font-size:14px;
        font-family:'SourceHanSansCN-Regular';
        font-weight:400;
        color:rgba(65,61,61,1);
        padding-bottom:10px;
      }
      :nth-child(2){
        font-size:12px;
        font-family:'SourceHanSansCN-Regular';
        font-weight:400;
        color:rgba(102,99,99,1);
        /* margin-top: 7px; */
      }
      :nth-child(3){
        font-size:12px;
        font-family:'SourceHanSansCN-Regular';
        font-weight:400;
        color:rgba(102,99,99,1);
        margin-top: 7px;
      }
    }
    .btn-box{
      padding:12px;

      span{
        width: 80px;
        height: 30px;
        display: inline-block;
        /* padding:8px 12px; */
        text-align:center;
        border:1px solid rgba(255,161,176,1);
        margin-left: 15px;
        font-size:14px;
        font-family:'SourceHanSansCN-Regular';
        font-weight:400;
        color:rgba(242,165,177,1);
        line-height:28px;
      }
      span:nth-child(1){
        background:rgba(242,165,177,1);
        color:rgba(255,255,255,1);
      }
      span:nth-child(3){
        margin-left: 0;
      }
    }
    .top-tabbar{
        position: fixed;left: 0;
        /* top: 1.45rem; */
        top: 0;
        width: 100%;
        z-index: 1;
      }
      .scroll{
      height:100%;
    overflow:hidden;
    }
    .datalist{
      position: fixed;
      width: 100%;
      top: 0;
      bottom: 0;
    }
    .top-tip{
    width: 100%;
    height 0.8rem;
    max-height: 0.8rem;
    text-align: center;
    display: flex;
    color #999;
    justify-content: center;
    align-items: center;
  }
  .top-tip>img{
    width 24px;
    height 24px;
  }
  .refresh-hook{
    color #666;
    padding-left:10px;
  }
  .mint-cell-title{
    flex:0 !important;
  }
  .mint-cell-value{
    flex:1;
  }
  .bottom{
        position: fixed;left: 0;bottom: 0;
        background:rgba(255,255,255,1);
        display: flex;
        width: 100%;
        height:50px;
        align-items: center;
        line-height: 50px;
        z-index: 200;
      }
      .bottom>div:nth-child(1){
        /* flex:1; */
        width:70;
        font-size:14px;
        font-family:'SourceHanSansCN-Medium';
        font-weight:500;
        color:rgba(255,161,176,1);
        padding-left: 20px;
      }
      .bottom>div:nth-child(2){
        flex:1;
        font-size:16px;
        font-family:'SourceHanSansCN-Medium';
        font-weight:500;
        color:rgba(255,161,176,1);
        text-align: center
      }
      .bottom>div:nth-child(3){
        width: 125px;
        background:rgba(255,161,176,1);
        text-align: center
      }
          /* 选框图片样式 */
          .selectedImg{
        width: 17px;height: 17px;
        margin-top: 30px;
      }
      .num-box{
      span{
        width: 24px;height: 24px;display:block;border-radius:50%;
      }
      img{
        width: 24px;height: 24px;
      }
      span:nth-child(2){
        display: inline-block;
        width: 90px;height: 24px;
        border-radius:12px;
        background:rgba(255,137,156,0.2);
        /* color:rgba(255,161,176,1); */
        text-align: center;line-height: 24px;
        margin: 0 -20px;
      }
    }
    .input{
      width: 40px;
      text-align: center;
      background: rgba(255,137,156,0.2);
      opacity:0.2;
      color:#000;
    }
    .topay{
        font-size:14px;
        font-family:'SourceHanSansCN-Medium';
        font-weight:600;
        color:rgba(255,255,255,1);
      }
      .li-move-left{
        animation:change-left .3s;
        animation-fill-mode:forwards;
      }

      @keyframes change-left{
            0%{transform: translate(0,0);}
            100%{transform: translate(-60px,0);}
        }
      .li-move-right{
        animation:change-right .3s;
        animation-fill-mode:forwards;
      }

      @keyframes change-right{
        0%{transform: translate(-60px,0);}
        100%{transform: translate(0,0);}
      }
  .delete{
    height: 100%;
    width: 60px;
    background: rgba(255,161,176,1);
    right: 0;top: 0;
    z-index: -1;
    opacity: 0;
    text-align: center;
    img{
      width: 24px;height: 24px;vertical-align: middle;

    }
  }
  .delete-show{
    z-index: 1;
    opacity: 1;
    transition: opacity 1s;

  }
        /* 点击按钮放大 */
  .zoom:active{
      transform: scale(1.1,1.1)
    }
    .price{
      font-size:16px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(255,161,176,1);
    }
  .zoom:active{
    transform: scale(1.3,1.3)
  }
  .h101{
    height:101%
  }
</style>
<style lang="stylus" scoped>
    .btn-box{
      padding:10px;
    }
  .btn-wl{
    font-size:12px;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(242,165,177,1);
    border:1px solid rgba(255,161,176,1);
    padding:8px 12px;
    margin-right: 15px;
  }
  .btn-qr{
    font-size:12px;
  font-family:SourceHanSansCN-Regular;
  font-weight:400;
  color:rgba(255,255,255,1);
  border:1px solid rgba(255,161,176,1);
  padding:8px 12px;
  background:rgba(242,165,177,1);
  }
  .PB100{
    padding-bottom: 100px;
  }
  .PB70{
    padding-bottom: 70px;
  }
  .msg-cen{
      padding: 15px 0;
      border-bottom: 1px solid rgba(238,238,238,1);
    }
    .msg-cen>div:nth-child(1){
      font-size:14px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(65,61,61,1);
    }
    .add-content{
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(102,99,99,1);
    }
    .add-content p{
      margin-top: 3px;;
    }
    .msg-bot{
      margin: 15px 0;

    }
    .msg-bot div:nth-child(1){
      font-size:14px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(65,61,61,1);
      }
      .sty{
        overflow: hidden !important;
       text-overflow: ellipsis !important;
       display: -webkit-box !important;
       -webkit-line-clamp: 2 !important;
       -webkit-box-orient: vertical !important;
      }
</style>
<style lang="stylus">
  html,body, #app{
    height: 100%;
  }
</style>
<template>
  <div
    class="flex-column-start"
    style="background:rgba(255,255,255,1);height:100%;"
  >
    <!-- <ComHeader title="联创订单"  leftArrow="left" class="title" /> -->
    <div class="top-tabbar">
      <ul class="flex-display ul">
        <li
          class="flex-num-one top-li"
          v-for="(item,index) in topTabbar"
          :key="index"
          v-if="index != 0 || isShowli"
          :class="liNum === index? 'active-li':''"
          @click="fnLiClick(item,index) "
        >
          <span :class="liNum === index? 'active-li-span':''">
            {{ item }}
          </span>
        </li>
      </ul>
    </div>

    <!-- 普通数据列表 -->
    <div
      style="margin-top: 1.1rem;height: 100%;flex:1;"
      class="datalist "
      v-if="type != 'pending' && type != 'finishedorder'"
    >
      <!-- 下拉，加载中动画 -->
      <div class="top-tip" v-if="pulldownMsg">
        <img
          src="../../../base/loading/loading.gif"
          v-if="pulldownMsg == '加载中...'"
        />
        <span class="refresh-hook">{{ pulldownMsg }}</span>
      </div>

      <!-- 滚动组件 -->
      <scroll
        class="scroll"
        :data="datalist"
        :pull-up-load="pullUpLoad"
        :pullup="isPullup"
        @touchEnd="touchEnd"
        @scroll="scroll"
        @scrollToEnd="searchMore"
        ref="suggest"
      >
        <ul style="padding-bottom: 100px;" class="flex-column-start" :class="datalist.length<3?'h101':''">
          <li class="data-li " v-for="(item,index) in datalist" :key="index">
            <!-- 时间 -->
            <!-- <p class="li-time" v-if="liNum != 0">
                <span >{{item.add_time}}</span>
              </p> -->
            <div class="pos-relative">
              <div
                class="flex-display li-content "
                :class="[item.isLeft == true ? 'li-move-left' : 'li-move-right']"
                @touchmove="mousemove(index)"
                @touchend="mouseend()"
                @click="changeCurrentOrderStatic(index,item.isOpen)"
              >
                <!-- 商品选择框 -->
                <div style="margin-right:8px">
                  <img
                    :src="item.isOpen ? selectedImg : unSelectedImg"
                    class="selectedImg"
                  />
                </div>

                <!-- 商品图片 -->
                <div>
                  <img
                    :src="item.thumbnail"
                    style="width: 73px;height: 73px;"
                  />
                </div>

                <!-- 商品详细内容 -->
                <div class="li-content-right flex-column-between flex-num-one">
                  <!-- 标题 -->
                  <div>
                    <p>{{ item.title }}</p>
                  </div>

                  <!-- 金额与数量 -->
                  <div class="flex-row-between">
                    <!-- 金额 -->
                    <div>
                      <img
                        src="../../../../static/new/huiyuanjifen.png"
                        style="width: 26px;height:23px;margin-bottom: 3px;padding: 0;"
                      />
                      <span class="price">
                        {{ item.core }}
                      </span>
                    </div>
                    <!-- 数量控制 -->
                    <div class="num-box flex-display">
                      <!-- 减号 -->
                      <span
                        @click.stop="minusNum(index,item.order_code)"
                        class="zoom"
                      >
                        <img :src="item.goods_counts!=1?minusUse:minusDis" />
                      </span>
                      <!-- 数量展示 -->
                      <span>
                        <input
                          type="number"
                          @input="input(item,index)"
                          v-model="item.goods_counts "
                          class="input"
                        />
                      </span>
                      <!-- 加号 -->
                      <span @click.stop="plusNum(item,index)" class="zoom">
                        <img :src="isplus?plusUse:plusDis" />
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 商品删除按钮 -->
              <div
                class="pos-absolute delete flex-column-center"
                :class="[item.isLeft == true ? 'delete-show' : '']"
                @click="deleteOrder(item.order_code,index)"
              >
                <img src="../../../../static/new/icon_del@2x.png" />
              </div>
            </div>
          </li>
          <!-- <li style="height:200px;"></li> -->
        </ul>
      </scroll>
    </div>

    <div
      v-if="type == 'pending'"
      class="datalist"
      style="margin-top: 1.1rem;height: 100%;"
    >
      <!-- 下拉，加载中动画 -->
      <div class="top-tip" v-if="pulldownMsg">
        <img
          src="../../../base/loading/loading.gif"
          v-if="pulldownMsg == '加载中...'"
        />
        <span class="refresh-hook">{{ pulldownMsg }}</span>
      </div>
      <scroll
        class="scroll"
        :data="datalist"
        :pull-up-load="pullUpLoad"
        :pullup="isPullup"
        @touchEnd="touchEnd"
        @scroll="scroll"
        @scrollToEnd="searchMore"
        ref="suggest"
      >
        <ul :class="[liNum==0||liNum==1||liNum==2?'PB100':'PB70',datalist.length<3?'h101':'']">
          <li class="data-li " v-for="(item,index) in datalist" :key="index">
            <!-- 进货单，待完成 -->
            <div class="pos-relative" v-if="item.order_type == '进货单'">
              <!-- 时间 -->
              <p class="li-time flex-row-between">
                <span>{{ item.add_time }}</span>
                <span>{{ item.order_code }}</span>
              </p>
              <div
                class="flex-display li-content "
                :class="[item.isLeft == true ? 'li-move-left' : 'li-move-right']"
                @touchmove="mousemove(index)"
                @touchend="mouseend()"
                @click="changeCurrentOrderStatic(index,item.isOpen)"
              >
                <!-- 商品图片 -->
                <div>
                  <img
                    :src="item.goods_thumbnail"
                    style="width: 73px;height: 73px;"
                  />
                </div>

                <!-- 商品详细内容 -->
                <div class="li-content-right flex-column-between flex-num-one">
                  <!-- 标题 -->
                  <div>
                    <p
                      v-html="item.describe"
                      class="text-overflow-2 sty"
                      style="    overflow: hidden !important;
                        text-overflow: ellipsis !important;
                        display: -webkit-box !important;
                        -webkit-line-clamp: 2 !important;
                        -webkit-box-orient: vertical !important;"
                    ></p>

                    <!-- <p>{{fndescribe(item.describe)}}</p> -->
                    <!-- <p v-html="item.title"></p> -->
                  </div>

                  <!-- 金额与数量 -->
                  <div class="flex-row-between">
                    <!-- 金额 -->
                    <div>
                      <img
                        src="../../../../static/new/huiyuanjifen.png"
                        style="width: 26px;height:23px;margin-bottom: 3px;padding: 0;"
                      />
                      <span class="price"> 总金额：{{ item.goods_fee }} </span>
                    </div>
                    <!-- 数量控制 -->
                    <div class="num-box flex-display">
                      <!-- 数量展示 -->
                      数量：{{ item.goods_counts }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-row-between" style="padding:10px;">
                <p>{{ item.order_type }}</p>
                <p>{{ item.check_states }}</p>
              </div>
            </div>

            <!-- 出货单，待完成 -->
            <div v-else>
              <p class="li-time flex-row-between">
                <span>{{ item.add_time }}</span>
                <span>{{ item.order_num }}</span>
              </p>
              <div
                class="flex-display li-content "
                :class="[item.isLeft == true ? 'li-move-left' : 'li-move-right']"
              >
                <!-- 商品图片 -->
                <div>
                  <img
                    :src="item.goods_thumbnail"
                    style="width: 73px;height: 73px;"
                  />
                </div>

                <!-- 商品详细内容 -->
                <div class="li-content-right flex-column-between flex-num-one">
                  <!-- 标题 -->
                  <div>
                    <p v-html="item.describe" class="text-overflow-2 sty"></p>
                    <!-- <p v-html="item.title"></p> -->
                  </div>

                  <!-- 金额与数量 -->
                  <div class="flex-row-between">
                    <!-- 金额 -->
                    <div>
                      <img
                        src="../../../../static/new/huiyuanjifen.png"
                        style="width: 26px;height:23px;margin-bottom: 3px;padding: 0;"
                      />
                      <span class="price"> 总金额：{{ item.goods_fee }} </span>
                    </div>
                    <!-- 数量控制 -->
                    <div class="num-box flex-display">
                      <!-- 数量展示 -->
                      数量：{{ item.goods_counts }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- 地址展示 -->
              <div class="msg-cen">
                <div>收货地址</div>
                <div
                  class="flex-display"
                  style="justify-content:space-between;"
                >
                  <div class="add-content">
                    <p>
                      {{ item ? item.deliver_name : "收件人" }}
                      {{ item ? item.phone : "13888888888" }}
                    </p>
                    <p>
                      <img
                        src="../../../../static/new/icon_location.png"
                        alt=""
                        style="width: 8px;height:10px;margin: 0 3px 3px 0; "
                      />
                      {{ item ? item.province : "广东省" }}
                      {{ item ? item.city : "广州市" }}
                      {{ item ? item.quxian : "白云区" }}
                      {{ item ? item.address : "智造广场" }}
                    </p>
                  </div>
                </div>
              </div>

              <div class="flex-row-between btn-box" style="padding-top: 20px;">
                <div>
                  {{ item.order_type }}
                </div>
                <div class="flex-display" v-if="liNum!=4">
                  <div
                    class="btn-wl zoom"
                    @click="fnLogistics(item,index)"
                    v-if="item.goods_state !='仓库未发货'"
                  >
                    查看物流
                  </div>
                  <div
                    class="btn-qr zoom"
                    @click="fnBtnQR(item,index)"
                    v-if="item.goods_state !='仓库未发货'"
                  >
                    确认收货
                  </div>
                  <div v-if="item.goods_state =='仓库未发货'">
                    仓库未发货
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </scroll>
    </div>



    <div
      v-if="type == 'finishedorder'"
      class="datalist"
      style="margin-top: 1.1rem;height: 100%;"
    >
      <!-- 下拉，加载中动画 -->
      <div class="top-tip" v-if="pulldownMsg">
        <img
          src="../../../base/loading/loading.gif"
          v-if="pulldownMsg == '加载中...'"
        />
        <span class="refresh-hook">{{ pulldownMsg }}</span>
      </div>
      <scroll
        class="scroll"
        :data="datalist"
        :pull-up-load="pullUpLoad"
        :pullup="isPullup"
        @touchEnd="touchEnd"
        @scroll="scroll"
        @scrollToEnd="searchMore"
        ref="suggest"
      >
        <ul :class="[liNum==0||liNum==1||liNum==2?'PB100':'PB70',datalist.length<3?'h101':'']" >
          <li class="data-li " v-for="(item,index) in datalist" :key="index">
            <!-- 进货单，待完成 -->
            <div class="pos-relative" v-if="item.order_type == '进货单'">
              <!-- 时间 -->
              <p class="li-time flex-row-between">
                <span>{{ item.add_time }}</span>
                <span>{{ item.order_code }}</span>
              </p>
              <div
                class="flex-display li-content "
                :class="[item.isLeft == true ? 'li-move-left' : 'li-move-right']"
                @touchmove="mousemove(index)"
                @touchend="mouseend()"
                @click="changeCurrentOrderStatic(index,item.isOpen)"
              >
                <!-- 商品图片 -->
                <div>
                  <img
                    :src="item.goods_thumbnail"
                    style="width: 73px;height: 73px;"
                  />
                </div>

                <!-- 商品详细内容 -->
                <div class="li-content-right flex-column-between flex-num-one">
                  <!-- 标题 -->
                  <div>
                    <p
                      v-html="item.describe"
                      class="text-overflow-2 sty"
                      style="    overflow: hidden !important;
                        text-overflow: ellipsis !important;
                        display: -webkit-box !important;
                        -webkit-line-clamp: 2 !important;
                        -webkit-box-orient: vertical !important;"
                    ></p>

                    <!-- <p>{{fndescribe(item.describe)}}</p> -->
                    <!-- <p v-html="item.title"></p> -->
                  </div>

                  <!-- 金额与数量 -->
                  <div class="flex-row-between">
                    <!-- 金额 -->
                    <div>
                      <img
                        src="../../../../static/new/huiyuanjifen.png"
                        style="width: 26px;height:23px;margin-bottom: 3px;padding: 0;"
                      />
                      <span class="price"> 总金额：{{ item.goods_fee }} </span>
                    </div>
                    <!-- 数量控制 -->
                    <div class="num-box flex-display">
                      <!-- 数量展示 -->
                      数量：{{ item.goods_counts }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-row-between" style="padding:10px;">
                <p>{{ item.order_type }}</p>
                <p>{{ item.check_states }}</p>
              </div>
            </div>

            <!-- 出货单，待完成 -->
            <div v-if="item.order_type == '出货单'">
              <p class="li-time flex-row-between">
                <span>{{ item.add_time }}</span>
                <span>{{ item.order_num }}</span>
              </p>
              <div
                class="flex-display li-content "
                :class="[item.isLeft == true ? 'li-move-left' : 'li-move-right']"
              >
                <!-- 商品图片 -->
                <div>
                  <img
                    :src="item.goods_thumbnail"
                    style="width: 73px;height: 73px;"
                  />
                </div>

                <!-- 商品详细内容 -->
                <div class="li-content-right flex-column-between flex-num-one">
                  <!-- 标题 -->
                  <div>
                    <p v-html="item.describe" class="text-overflow-2 sty"></p>
                    <!-- <p v-html="item.title"></p> -->
                  </div>

                  <!-- 金额与数量 -->
                  <div class="flex-row-between">
                    <!-- 金额 -->
                    <div>
                      <img
                        src="../../../../static/new/huiyuanjifen.png"
                        style="width: 26px;height:23px;margin-bottom: 3px;padding: 0;"
                      />
                      <span class="price"> 总金额：{{ item.goods_fee }} </span>
                    </div>
                    <!-- 数量控制 -->
                    <div class="num-box flex-display">
                      <!-- 数量展示 -->
                      数量：{{ item.goods_counts }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- 地址展示 -->
              <div class="msg-cen">
                <div>收货地址</div>
                <div
                  class="flex-display"
                  style="justify-content:space-between;"
                >
                  <div class="add-content">
                    <p>
                      {{ item ? item.deliver_name : "收件人" }}
                      {{ item ? item.phone : "13888888888" }}
                    </p>
                    <p>
                      <img
                        src="../../../../static/new/icon_location.png"
                        alt=""
                        style="width: 8px;height:10px;margin: 0 3px 3px 0; "
                      />
                      {{ item ? item.province : "广东省" }}
                      {{ item ? item.city : "广州市" }}
                      {{ item ? item.quxian : "白云区" }}
                      {{ item ? item.address : "智造广场" }}
                    </p>
                  </div>
                </div>
              </div>

              <div class="flex-row-between btn-box" style="padding-top: 20px;">
                <div>
                  {{ item.order_type }}
                </div>
                <div class="flex-display" v-if="liNum!=4">
                  <div
                    class="btn-wl zoom"
                    @click="fnLogistics(item,index)"
                    v-if="item.goods_state !='仓库未发货'"
                  >
                    查看物流
                  </div>
                  <div
                    class="btn-qr zoom"
                    @click="fnBtnQR(item,index)"
                    v-if="item.goods_state !='仓库未发货'"
                  >
                    确认收货
                  </div>
                  <div v-if="item.goods_state =='仓库未发货'">
                    仓库未发货
                  </div>
                </div>
              </div>
            </div>

            <!-- 转让单，已完成 -->
            <div v-if="item.order_type == '转让单'">
                <p class="li-time flex-row-between">
                  <span>{{ item.add_time }}</span>
                  <span>{{ item.order_num }}</span>
                </p>
                <div
                  class="flex-display li-content "
                  :class="[item.isLeft == true ? 'li-move-left' : 'li-move-right']"
                >
                  <!-- 商品图片 -->
                  <div>
                    <img
                      :src="item.goods_thumbnail"
                      style="width: 73px;height: 73px;"
                    />
                  </div>
  
                  <!-- 商品详细内容 -->
                  <div class="li-content-right flex-column-between flex-num-one">
                    <!-- 标题 -->
                    <div>
                      <p v-html="item.describe" class="text-overflow-2 sty"></p>
                      <!-- <p v-html="item.title"></p> -->
                    </div>
  
                    <!-- 金额与数量 -->
                    <div class="flex-row-between">
                      <!-- 金额 -->
                      <div>
                        <img
                          src="../../../../static/new/huiyuanjifen.png"
                          style="width: 26px;height:23px;margin-bottom: 3px;padding: 0;"
                        />
                        <span class="price"> 总金额：{{ item.goods_fee }} </span>
                      </div>
                      <!-- 数量控制 -->
                      <div class="num-box flex-display">
                        <!-- 数量展示 -->
                        数量：{{ item.goods_counts }}
                      </div>
                    </div>
                  </div>
                </div>
  
                <div class="flex-row-between btn-box" style="padding-top: 20px;">
                  <div>
                    {{ item.order_type }}
                  </div>
                  <div v-if="liNum ==4" class="flex-row-center">
                      转让人：<div class="text-red">{{ item.merchant_id ==wxUserInfo.id?'我':item.merchant_id }} </div>
                     <div style="margin-left: 20px;"></div>
                      接收人：<div class="text-red" >{{ item.receive_user==wxUserInfo.id?'我':item.receive_user }}</div>
                  </div>
                  <div class="flex-display" v-if="liNum!=4">
                    <div
                      class="btn-wl zoom"
                      @click="fnLogistics(item,index)"
                      v-if="item.goods_state !='仓库未发货'"
                    >
                      查看物流
                    </div>
                    <div
                      class="btn-qr zoom"
                      @click="fnBtnQR(item,index)"
                      v-if="item.goods_state !='仓库未发货'"
                    >
                      确认收货
                    </div>
                    <div v-if="item.goods_state =='仓库未发货'">
                      仓库未发货
                    </div>
                  </div>
                </div>
              </div>
          </li>
        </ul>
      </scroll>
    </div>






    <!-- 没有列表，显示暂无内容 -->
    <div v-if="datalist.length==0 ">
      <img
        src="../../../../static/new/img_empty_order@2x.png"
        alt=""
        style="width: 100%;height:400px;margin-top: 1.1rem;"
      />

      <p style="text-align: center;font-size:16px;color:rgba(102,102,102,1);">
        本页暂无内容
      </p>
    </div>

    <div class="bottom" v-if=" liNum != 3 && liNum != 4 ">
      <div @click="changeAll">
        <img
          :src="allSelect==true?selectedImg:unSelectedImg"
          style="width: 17px;height: 17px;"
        />
        全选
      </div>
      <div>
        合计:
        <img
          src="../../../../static/new/huiyuanjifen.png"
          style="width: 26px;height:23px;margin-bottom: 0px;padding: 0;"
        />
        <span v-html="total.toFixed(2)"></span>
      </div>
      <div @click="fnPay(liNum)" class="topay" v-if="liNum==0">
        确认进货（{{ goodsNum }}）
      </div>
      <div @click="fnPay(liNum)" class="topay" v-if="liNum==1">
        确认出货（{{ goodsNum }}）
      </div>
      <div @click="fnPay(liNum)" class="topay" v-if="liNum==2">
        确认转让（{{ goodsNum }}）
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import api from "@/fetch/api";
  import List from "./List";
  import Scroll from "@/base/scroll/scroll";
  import { Cell, CellSwipe, Toast, Indicator } from "mint-ui";
  import { mapState, mapGetters, mapMutations } from "vuex";
  function handler() {
    event.preventDefault();
  }
  export default {
    data() {
      return {
        moveNum: 0,
        wxUserInfo: this.$store.state.userInfo,
        settlement: this.$store.state.settlement,

        // 控制，是否显示进货单
        isShowli: false,
        // tabbar标签的数据
        topTabbar: ["进货单", "出货单", "转让单", "处理中", "已完成"],

        // 当前tabbar的位置
        liNum: 0,

        // 滚动参数
        isPullup: true, // 是否需要滚动结束派发事件
        pullUpLoad: true,
        isShowTotal: true,
        pulldownMsg: "",

        // 是否全选
        allSelect: false,
        selectedImg: "../../../../static/new/icon_checked@3x.png",
        unSelectedImg: "../../../../static/new/icon_unchecked@3x.png",

        total: 0,

        // 当前值
        num: 1,

        // 最小值
        minNun: 1,

        // 最大最小图片的判断
        isplus: true,
        isminus: true,

        // 选择框图片
        plusDis: "../../../../static/new/but_plus_dis.png",
        plusUse: "../../../../static/new/but_plus_usable.png",
        minusDis: "../../../../static/new/but_subtract_dis.png",
        minusUse: "../../../../static/new/but_subtract_usable.png",

        arr: [],

        // 当前数据的类型
        type: "stock",

        // 数据列表
        datalist: [],
        page: 1,
        next: "",

        // 目前选择的商品个数
        goodsNum: 0,

        // 存放X轴位移的数据
        arrX: [],
        deliver: [],
        stock: [],
        receive:[],
        transfer:[],
        switch: true,
        aaa: true
      };
    },
    mounted() {},

    components: {
      Scroll,
      CellSwipe,
      Toast,
      Indicator
    },
    created() {
      document.title = "订单列表";

      console.log(66666);
      console.log(this.wxUserInfo);

      if (this.wxUserInfo == "") {
        this.wxUserInfo = this.getlocalStorage("wxUserInfo");
      }
      console.log(this.wxUserInfo);
      console.log(77777);

      // 如果不是联合创始人，则显示第一个按钮
      if (
        this.wxUserInfo.level == "联合创始人" ||
        this.wxUserInfo.level == "系统管理员"
      ) {
        this.isShowli = true;
      } else {
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
        this.liNum = 1;
        this.type = "deliver";
      }
      console.log(123,this.settlement)
      // 刚进来，判断选择的入口
      if (this.settlement == "公司进货") {
        this.liNum = 0;
        this.type = "stock";
      } else if (this.settlement == "个人出货") {
        this.liNum = 1;
        this.type = "deliver";
      } else if (this.settlement == "个人转让") {
        this.liNum = 2;
        this.type = "transfer";
      }

      this.fnGetData();
      document.body.addEventListener("touchmove", handler, { passive: false });
    },

    beforeDestroy() {
      document.body.removeEventListener("touchmove", handler, false);
    },

    methods: {
      // 查看物流
      fnLogistics(item, index) {
        console.log(item, index);
        console.log(item, index);

        const params4 = {
          userid: this.wxUserInfo.id,
          type: "xiadan",
          order_code: item.order_num,
          kd_order_no: item.kd_order_code
        };

        this.$router.push({
          path: "/killCourier",
          query: {
            userid: this.wxUserInfo.id,
            type: "xiadan",
            order_code: item.order_num,
            kd_order_no: item.kd_order_code
          }
        });

        console.log(888, params4);
      },
      fndescribe(text) {
        console.log("text", text);
        // return String(text).slice(5)
        return 123;
      },
      fnBtnQR(item, index) {
        console.log(item.order_code);
        console.log(item.order_num);
        var code = item.order_num ? item.order_num : item.order_code;
        const params9 = {
          order_num: code
        };
        api.takedeliver(params9).catch(res => {
          console.log("aaa", res);
          Toast(res.data.msg);
          this.datalist.splice(index, 1);
        });
      },
      fnLiClick(item, index) {
        this.liNum = index;
        this.deliver = [];
        this.stock = [];
        this.receive = [];
        this.transfer = [];
        this.page = 1;
        if (this.liNum == 0) {
          this.type = "stock";
        } else if (this.liNum == 1) {
          this.type = "deliver";
        } else if (this.liNum == 2) {
          this.type = "transfer";
        } else if (this.liNum == 3) {
          this.type = "pending";
        } else if (this.liNum == 4) {
          this.type = "finishedorder";
        }

        // 顶部变了，清空数据，重新请求数据
        this.datalist = [];
        this.fnGetData();
      },
      /**
       * @desc    输入框输入数据是，改变数据库的值
       * @author  ye
       * @param   {order_code,b}，order_code,商品编号，b，当前的数量
       */
      input(item, index) {
        // item.order_code,item.goods_counts,item.m_inventory,item.c_inventory
        // console.log(order_code,b)
        // console.log(123,order_code,b,c,d)
        var num = Math.min(item.m_inventory, item.c_inventory);
        if (item.goods_counts > num) {
          item.goods_counts = num;
          Toast("最多选择" + item.goods_counts + "件");
        }
        this.fnToChangeNum(item.order_code, Number(item.goods_counts));
      },

      /**
       * @desc    鼠标移动，打开删除按钮
       * @author  ye
       * @param   none
       */
      mousemove(index, e) {
        var e = e || window.event;
        var endX = e.touches[0].clientX;
        // 每时每刻，推入数组，判断数据的数据
        this.arrX.push(endX);
        if (this.arrX[0] - this.arrX[this.arrX.length - 1] > 20) {
          for (var i = 0; i < this.datalist.length; i++) {
            // 打开当前，关闭其他开关
            if (i == index) {
              this.datalist[index].isLeft = true;
            } else {
              this.datalist[i].isLeft = false;
            }
          }
        } else if (this.arrX[0] - this.arrX[this.arrX.length - 1] < -20) {
          this.datalist[index].isLeft = false;
        }
      },

      /**
       * @desc    鼠标停止，重置数组
       * @author  ye
       * @param   none
       */
      mouseend() {
        this.arrX = [];
      },

      /**
       * @desc    删除订单
       * @author  ye
       * @param   {order_code}，order_code，订单的编号
       */
      deleteOrder(order_code, index) {
        const params9 = {
          order_code: order_code
        };
        api.removecart(params9).catch(res => {
          Toast({
            message: res.data.msg,
            duration: 2000
          });

          // 重置，重新请求数据
          // this.datalist = []
          // this.fnGetData()

          // 后台已修改，还要修改前台，为了不刷新，动态删除前台数据
          this.datalist.splice(index, 1);
        });
      },

      /**
       * @desc    数量操作，减法
       * @author  ye
       * @param   none
       */
      minusNum(index, order_code) {
        if (this.datalist[index].goods_counts != this.minNun) {
          this.datalist[index].goods_counts--;
        } else {
          Toast({
            message: "到底啦",
            duration: 1000
          });
        }
        // 上面修改本地，下面修改后台
        this.fnToChangeNum(order_code, this.datalist[index].goods_counts);
      },

      /**
       * @desc    数量操作，加法
       * @author  ye
       * @param   none
       */
      plusNum(item, index) {
        var num = Math.min(item.m_inventory, item.c_inventory);
        this.datalist[index].goods_counts++;

        if (item.goods_counts > num) {
          item.goods_counts = num;
          Toast("最多选择" + item.goods_counts + "件");
        }

        // console.log(index,order_code)
        // this.datalist[index].goods_counts ++
        // 上面修改本地，下面修改后台
        this.fnToChangeNum(item.order_code, this.datalist[index].goods_counts);
      },

      /**
       * @desc    修改后台数据
       * @author  ye
       * @param   {order_code,num}，order_code,订单编号，num，数量
       */
      fnToChangeNum(order_code, num) {
        const params8 = {
          order_code: order_code,
          goodscounts: num
        };
        api.modifycart(params8).catch(res => {
          // console.log('修改订单', res);
        });
      },

      /**
       * @desc    改变单个订单选中状态
       * @author  ye
       * @param   index 当前按钮索引值，isOpen，当前按钮状态
       */
      changeCurrentOrderStatic(index, isOpen) {
        // console.log(index);
        if (isOpen == true) {
          this.datalist[index].isOpen = false;
        } else {
          this.datalist[index].isOpen = true;
        }
      },

      /**
       * @desc    全选框
       * @author  ye
       * @param   none
       */
      changeAll() {
        // 取非
        this.allSelect = !this.allSelect;

        // 把所有的选框，变成取非的数值
        for (var i = 0; i < this.datalist.length; i++) {
          this.datalist[i].isOpen = this.allSelect;
        }
      },

      /**
       * @desc    去付款
       * @author  ye
       * @param   none
       */
      fnPay() {
        // 获取待支付
        var arr = [];
        for (var i = 0; i < this.datalist.length; i++) {
          if (this.datalist[i].isOpen == true) {
            // 存入当前，判断是否为空
            arr.push(this.datalist[i].order_no);
          }
        }

        if (arr.length == 0) {
          Toast({
            message: "请选择商品",
            duration: 2000
          });
          return;
        }

        // 传过去当前结算的类型
        this.$router.push({
          path: "order_write?type=" + this.type
        });
      },

      /**
       * @desc    下拉刷新
       * @author  ye
       * @param   none
       */
      touchEnd() {
        console.log("下拉刷新");
        this.pulldownMsg = "加载中...";
        console.log(this.type);

        setTimeout(() => {
          // 重置，隐藏提示框
          this.pulldownMsg = "";
          // 重置数据
          this.page = 1;
          this.deliver = [];
          this.stock = [];
          this.receive = [];
          this.transfer = [];

          this.datalist = [];
          this.fnGetData();
        }, 1000);
      },

      /**
       * @desc    到底了
       * @author  ye
       * @param   none
       */
      searchMore() {
        console.log("到底了");
        console.log(this.next);

        if (this.next) {
          Indicator.open({
            text: "加载中...",
            spinnerType: "fading-circle"
          });
          this.page++;
          console.log("this.page", this.page);
          this.fnGetData();
        } else {
          Toast("暂无更多");
        }
      },

      /**
       * @desc    滚动事件，释放加载数据
       * @author  ye
       * @param   none
       */
      scroll() {
        console.log("scroll");
        this.pulldownMsg = "释放立即加载";
      },

      /**
       * @desc    获取列表数据
       * @author  ye
       * @param   none
       */
      fnGetData() {
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });

        console.log("this.type", this.type);
        if (
          this.type == "stock" ||
          this.type == "deliver" ||
          this.type == "transfer"
        ) {
          const params6 = {
            userid: this.wxUserInfo.id,
            type: this.type,
            page: this.page
          };
          api.getcart(params6).catch(res => {
            console.log("列表1", res);
            // console.log('列表1',res.data.next)

            // 是否存在分页
            if (res.data.next) {
              this.next = res.data.next;
            } else {
              this.next = "";
            }

            res.data.results.forEach(item => {
              item.isOpen = false;
              item.isLeft = false;
            });

            this.datalist = [...this.datalist, ...res.data.results];
            Indicator.close();
          });
        } else if (this.type == "pending") {
          const params7 = {
            userid: this.wxUserInfo.id,
            page: this.page
          };
          api.pendingorder(params7).catch(res => {
            Indicator.close();
            console.log("pending", res);
            // 是否存在分页
            if (res.data.next) {
              this.next = res.data.next;
            } else {
              this.next = "";
            }

            // console.log('this.deliver,this.stock1111111111',this.deliver,this.stock)
            if (res.data.results.stock) {
              this.stock = [...this.stock, ...res.data.results.stock];
            }
            this.deliver = [...this.deliver, ...res.data.results.deliver];
            // console.log('this.deliver,this.stock2222222222',this.deliver,this.stock)

            this.datalist = [];

            this.datalist = [...this.stock, ...this.deliver];
            console.log("this.datalist", this.datalist);
          });
        } else if (this.type == "finishedorder") {
          const params7 = {
            userid: this.wxUserInfo.id,
            page: this.page
          };
          api.finishedorder(params7).catch(res => {
            Indicator.close();
            console.log("pending", res);
            // 是否存在分页
            if (res.data.next) {
              this.next = res.data.next;
            } else {
              this.next = "";
            }

            // console.log('this.deliver,this.stock1111111111',this.deliver,this.stock)
            if (res.data.results.stock) {
              this.stock = [...this.stock, ...res.data.results.stock];
            }
            this.deliver = [...this.deliver, ...res.data.results.deliver];
            this.receive = [...this.receive, ...res.data.results.receive];
            this.transfer = [...this.transfer, ...res.data.results.transfer];
            // console.log('this.deliver,this.stock2222222222',this.deliver,this.stock)

            this.datalist = [];

            this.datalist = [...this.stock, ...this.deliver, ...this.receive, ...this.transfer];
            console.log("this.datalist", this.datalist,this.datalist.length);
          });
        }
      }
    },
    // 监听数字的变化
    watch: {
      liNum: {
        immediate: true,
        deep: true,
        handler(new_val, old_val) {
          console.log(123);
          console.log(new_val, old_val);
          console.log("this.liNum", this.liNum);
          // if(this.liNum == 0){
          //   this.type = 'stock'
          // }else if(this.liNum == 1){
          //   this.type = 'deliver'
          // }else if(this.liNum == 2){
          //   this.type =  'transfer'
          // }else if(this.liNum == 3){
          //   this.type = 'pending'
          // }else if(this.liNum == 4){
          //   this.type = ''
          // }

          // // 顶部变了，清空数据，重新请求数据
          // this.datalist = []
          // this.fnGetData()
        }
      },
      // 监听数据列表
      datalist: {
        immediate: true,
        deep: true,
        handler(new_val, old_val) {
          console.log(456);
          // console.log("datalist");
          // console.log(this.datalist);
          this.goodsNum = 0;
          var total = 0;
          var arr = [];
          // 判断开关
          // 循环数据
          for (var i = 0; i < this.datalist.length; i++) {
            if (this.datalist[i].isOpen == true) {
              // 存入索引值
              arr.push(i);

              // 计算商品数量
              this.goodsNum += Number(this.datalist[i].goods_counts);

              // 计算总价
              total +=
                this.datalist[i].core * Number(this.datalist[i].goods_counts);
            }
          }

          // 存入本地
          this.setlocalStorage("goodsarr", arr);
          this.total = total;

          // 检测数据，如果都为真，则为真，有一个为假，则为假
          for (var i = 0; i < this.datalist.length; i++) {
            if (this.datalist[i].isOpen == false) {
              this.allSelect = false;
              return;
            } else {
              this.allSelect = true;
            }
          }
        }
      }
    }
  };
</script>
